<template>
  <view class="bank-container">
    <!-- header -->
    <t-header @back="clickNavBackFn">绑定银行卡</t-header>
    <!-- content -->
    <view class="aa">
      <view class="bank-content">
        <tui-form ref="bankRef" style="display: none"></tui-form>
        <view class="padding-bottom text-sm text-gray"
          >请绑定账户本人银行卡</view
        >
        <tui-input
          v-model="formData.deposit_bank"
          padding="26rpx 0"
          :lineLeft="false"
          :size="30"
          :labelSize="32"
          label="银行"
          placeholder="请输入"
        />
        <tui-input
          v-model="formData.khzhihang"
          padding="26rpx 0"
          :lineLeft="false"
          :size="30"
          :labelSize="32"
          placeholder="请输入"
          label="分行"
        />
        <tui-input
          v-model="formData.name"
          padding="26rpx 0"
          :lineLeft="false"
          :size="30"
          :labelSize="32"
          placeholder="请输入"
          label="持卡人"
        />
        <tui-input
          v-model="formData.account"
          padding="26rpx 0"
          :lineLeft="false"
          :size="30"
          :labelSize="32"
          placeholder="请输入"
          label="卡号"
        />
        <!-- <view class="flex text-sm  align-center padding-tb">
					<tui-checkbox color="#f42f3c" :checked="agree" @change="agree = !agree"></tui-checkbox>
					<text class="padding-left-xs">我已阅读并同意</text>
					<navigator class="text-orange" url="/pages/cms/xieyi">《用户协议》</navigator>
				</view> -->
        <view>
          <tui-button
            type="danger"
            :loading="submiting"
            :disabled="formData.account == '' || submiting"
            @click="submit"
            style="height: 96rpx !important"
            >提交</tui-button
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';

  import THeader from '@/components/views/t-header/index.vue'; // 头部组件

  // api
  import { bindAccount } from '@/api/user.js';

  onLoad((options) => {
    if (options.card) {
      let card = JSON.parse(options.card);
      let { id, name, deposit_bank, account, khzhihang } = card;
      formData.value = {
        id,
        name,
        deposit_bank,
        account,
        khzhihang,
      };
      console.log(card);
    }
  });

  // 点击返回
  const clickNavBackFn = () => {
    const pages = getCurrentPages();
    if (pages.length >= 2) {
      uni.navigateBack();
    } else {
      uni.switchTab({
        url: '/pages/my/index',
      });
    }
  };

  const agree = ref(false);
  const formData = ref({
    name: '',
    khzhihang: '',
    deposit_bank: '',
    account: '',
    jiami: 1,
  });
  const submiting = ref(false);
  const bankRef = ref(null);

  const submit = async () => {
    // if (!agree.value) {
    //   return uni.showToast({
    //     title: '请勾选协议',
    //   });
    // }

    let rules = [
      {
        name: 'deposit_bank',
        rule: ['required', 'isChinese'],
        msg: ['请输入银行名称', '请输入正确的信息'],
      },
      {
        name: 'khzhihang',
        rule: ['required', 'isChinese'],
        msg: ['请输入银行分行名称', '请输入正确的信息'],
      },
      {
        name: 'name',
        rule: ['required', 'isChinese'],
        msg: ['请输入姓名', '请输入正确的姓名'],
      },
      {
        name: 'account',
        rule: ['required', 'minLength:11', 'maxLength:19'],
        msg: ['请输入银行卡号', '请输入正确的卡号', '请输入正确的卡号'],
      },
    ];

    formData.value.jiami = 1;

    let postData = { ...formData.value };
    let checkRes;
    try {
      checkRes = await bankRef.value.validate(formData.value, rules);
    } catch (e) {
      //TODO handle the exception
      checkRes = e;
    }

    submiting.value = true;

    if (checkRes.isPass) {
      bindAccount(postData).then((res) => {
        submiting.value = false;

        if (res.code == 1) {
          uni.showModal({
            content: res.msg,
            showCancel: false,
            success() {
              uni.navigateBack();
            },
          });
        } else {
          uni.showToast({
            title: res.msg,
          });
        }
      });
    } else {
      submiting.value = false;
      uni.showToast({
        title: checkRes.errorMsg,
      });
    }
  };
</script>

<style lang="scss" scoped>
  .bank-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;
    box-sizing: border-box;

    .aa {
      flex: 1;
      padding: 0 18rpx 26rpx;

      .bank-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 18rpx;
        border-radius: 34rpx;
        background: #ffffff;
        box-sizing: border-box;
      }
    }
  }
</style>
